<template>
    <div class="voteManage">
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item><i class="el-icon-tickets"></i> 投票管理</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <!-- 列表 -->
      <div class="container">
        <div class="handle-box">
          <el-button plain @click.stop.prevent="appendVoteTemplate">新增</el-button>
          <div class="searchBox">
            <el-input class="handle-input" v-model.trim="searchText" placeholder="用户昵称或者动态内容" suffix-icon="el-icon-search" @keyup.enter.native="operateSearchRecord"></el-input>
          </div>
        </div>
        <el-table :data="voteList" style="width: 100%">
          <el-table-column align="center" width="120">
            <template slot-scope="scope" >  
              <span v-if="scope.row.voteState === '1'" style="color: #409EFF"># 动态</span>
              <span v-if="scope.row.voteState === '2'" style="color: #67C23A">进行中</span>
              <span v-if="scope.row.voteState === '3'" style="color: #F56C6C">已结束</span>
            </template>
          </el-table-column>
          <el-table-column label="">
            <template slot-scope="scope">
              <div class="tableScope" v-if="scope.row.voteType === '1'">
                <div class="tableScopeFirst" v-if="scope.row.defaultText">{{scope.row.defaultText}}</div>
                <div class="tableScopeFirst" v-if="scope.row.defaultImages">
                  <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in JSON.parse(scope.row.defaultImages)" :key="'imageCell'+indexCell">
                    <img :src="itemCell">
                  </div>
                </div>
                <div class="tableScopeFirst" v-if="scope.row.defaultVideos">
                  <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in JSON.parse(scope.row.defaultVideos)" :key="'videoCell'+indexCell">
                    <video :src="itemCell.url" :poster="itemCell.cover" controls v-if="indexCell === 0"></video>
                  </div>
                </div>
                <div class="tableScopeSecond">
                  <div class="tableScopeSecondCell">{{scope.row.nickName || '小悦老师'}}</div>
                  <div class="tableScopeSecondCell">{{scope.row.createTime}}</div>
                  <div class="tableScopeSecondCell">评论：{{scope.row.forumComment || 0}}</div>
                  <div class="tableScopeSecondCell">点赞：{{scope.row.forumPraise || 0}}</div>
                </div>
              </div>
              <div class="tableScope" v-if="scope.row.voteType === '2'">
                <div class="tableScopeFirst">
                  <div>{{scope.row.voteTitle}}</div>
                  <div>{{scope.row.voteExplain}}</div>
                </div>
                <div class="tableScopeSecond">
                  <div class="tableScopeSecondCell">{{scope.row.createTime}}</div>
                  <div class="tableScopeSecondCell">截止时间：{{scope.row.voteAbort}}</div>
                  <div class="tableScopeSecondCell">已有 {{scope.row.forumVote || 0}} 人投票</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" align="center" width="300">
              <template slot-scope="scope">
                  <el-button type="primary" plain v-if="scope.row.voteType === '1' && scope.row.matterStick === '0'" @click.stop.prevent="operateStickRecord(scope.row.matterId, '1')">置顶</el-button>
                  <el-button type="warning" plain v-if="scope.row.voteType === '1' && scope.row.matterStick === '1'" @click.stop.prevent="operateStickRecord(scope.row.matterId, '0')">取置</el-button>
                  <el-button type="success" plain @click.stop.prevent="operateExamineRecord(scope.row.matterId)" v-if="scope.row.voteType === '2'">查看</el-button>
                  <el-button type="danger" plain @click.stop.prevent="operateDeleteRecord(scope.row.forumId)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[10, 20, 30]"
            :page-size="10"
            layout="sizes, prev, pager, next, jumper"
            :total="listTotal">
          </el-pagination>
        </div>
      </div>
      <!-- 弹窗 (外层) -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogOuterVisible" width="60%" center>
        <!-- 新增 && 编辑 -->
        <div v-if="operateType === '1'">
          <div class="dialogContent">
            <!-- 选择生成 投票模板 -->
            <div class="optionTemplateContent" v-if="dynamicStateFrom.voteType === '0'">
              <el-button type="primary" plain @click.stop.prevent="optionVoteTemplate('1')">普通动态</el-button>
              <el-button type="success" plain @click.stop.prevent="optionVoteTemplate('2')">投票动态</el-button>
            </div>
            <!-- 普通动态 -->
            <div class="defaultDynamicContent" v-if="dynamicStateFrom.voteType === '1'">
              <el-form ref="dynamicStateFrom" :model="dynamicStateFrom" :rules="dynamicStateRules" label-width="20%">
                <el-form-item>
                  正文
                  <div class="defaultStick">
                    <el-checkbox  v-model="dynamicStateFrom.matterStick" label="置顶动态" border true-label="1" false-label="0"></el-checkbox >
                  </div>
                </el-form-item>
                <el-form-item prop="defaultText">
                  <el-input v-model="dynamicStateFrom.defaultText" type="textarea" placeholder="一起努力，让悦器社越来越好..." :autosize="{ minRows: 6, maxRows: 12}"></el-input>
                </el-form-item>
                <el-form-item>
                  <div class="defaultRadio">
                    <el-radio v-model="dynamicStateFrom.defaultMatterType" label="1" border>图片</el-radio>
                    <el-radio v-model="dynamicStateFrom.defaultMatterType" label="2" border>视频</el-radio>
                  </div>
                  <!-- 图片 -->
                  <div class="defaultUpload" v-if="dynamicStateFrom.defaultMatterType === '1'">
                    <span style="color: #ee3a29">最多9张图片</span>
                    <div class="uploadBox">
                      <el-button round>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                      <div class="uploadCell">
                        <input class="uploadInput" type="file" name="image" multiple ref="imageDefault" accept="image/*" @change="optionUploadMultimediaFile($event, '1', 0)"/>
                      </div>
                    </div>
                    <div class="exhibitionBox">
                      <draggable v-model="dynamicStateFrom.defaultImages" :options="dragOptions">
                        <transition-group tag="div" id="defaultImage" class="item-defaultImage">
                          <div class="exhibitionCell" v-for="(itemDefaultImage, indexDefaultImage) in dynamicStateFrom.defaultImages" :key="'defaultImage'+indexDefaultImage">
                            <img :src="itemDefaultImage">
                            <div class="exhibitionDelete" @click.stop.prevent="operateDeleteMultimedia(dynamicStateFrom.defaultImages, indexDefaultImage)">
                              <el-button type="danger" icon="el-icon-delete" circle size="mini" plain></el-button>
                            </div>
                          </div>
                        </transition-group>
                      </draggable>
                    </div>
                  </div>
                  <!-- 视频 -->
                  <div class="defaultUpload" v-if="dynamicStateFrom.defaultMatterType === '2'">
                    <span style="color: #ee3a29">只可1个视频</span>
                    <div class="uploadBox">
                      <el-button round>上传视频<i class="el-icon-upload el-icon--right"></i></el-button>
                      <div class="uploadCell">
                        <input class="uploadInput" type="file" name="video" ref="videoDefault" accept="video/*" @change="optionUploadMultimediaFile($event, '2', 0)"/>
                      </div>
                    </div>
                    <div class="exhibitionBox">
                      <div class="exhibitionCell" v-for="(itemDefaultVideo, indexDefaultVideo) in dynamicStateFrom.defaultVideos" :key="'defaultVideo'+indexDefaultVideo">
                        <div class="exhibitionCellCover">
                          <img :src="itemDefaultVideo.cover" v-if="itemDefaultVideo.cover && indexDefaultVideo === 0">
                        </div>
                        <video :src="itemDefaultVideo.url" controls v-if="indexDefaultVideo === 0"></video>
                        <div class="exhibitionDelete">
                          <el-button type="primary" icon="el-icon-picture" circle size="mini" plain></el-button>
                          <div class="uploadCell">
                            <input type="file" name="image" ref="defaultCover" accept="image/*" @change="optionUploadMultimediaFile($event, '6', indexDefaultVideo)"/>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item prop="userId">
                  <el-select v-model="dynamicStateFrom.userId" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in userList"
                      :key="'user'+index" 
                      :label="item.nick_name"
                      :value="item.user_id">
                      <span style="float: left;width: 30px;height: 30px;border-radius: 50%;">
                        <img :src="item.avatar_url" width="100%" height="100%">
                      </span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.nick_name || '暂无数据' }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <!-- 投票动态 -->
            <div class="voteDynamicContent" v-if="dynamicStateFrom.voteType === '2'">
              <el-form ref="dynamicStateFrom" :model="dynamicStateFrom" :rules="dynamicStateRules" label-width="20%">
                <el-form-item prop="voteTitle">
                  <div>标题</div>
                  <el-input v-model="dynamicStateFrom.voteTitle" type="text" placeholder="一起努力，让悦器社越来越好..."></el-input>
                </el-form-item>
                <el-form-item prop="voteExplain">
                  <div>说明</div>
                  <el-input v-model="dynamicStateFrom.voteExplain" type="textarea" placeholder="一起努力，让悦器社越来越好..." :autosize="{ minRows: 6, maxRows: 12}"></el-input>
                </el-form-item>
                <el-form-item prop="voteAbort">
                  <div>截止时间</div>
                  <el-date-picker v-model="dynamicStateFrom.voteAbort" type="datetime" placeholder="选择截止时间"></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <div>编辑选项</div>
                  <div v-if="dynamicStateFrom.voteMatterType === '0'">
                    <el-radio v-model="dynamicStateFrom.voteMatterType" label="1" border>文本投票</el-radio>
                    <el-radio v-model="dynamicStateFrom.voteMatterType" label="2" border>图文投票</el-radio>
                    <el-radio v-model="dynamicStateFrom.voteMatterType" label="3" border>视文投票</el-radio>
                  </div>
                  <!-- 文本 -->
                  <div class="optionContent" v-if="dynamicStateFrom.voteMatterType === '1'">
                    <div class="optionList">
                      <draggable v-model="dynamicStateFrom.plainTextOption" :options="dragOptions">
                        <transition-group tag="div" id="plainText" class="item-plainText">
                          <div class="optionCell" v-for="(itemPlainText, indexPlainText) in dynamicStateFrom.plainTextOption" :key="'plainText'+indexPlainText">
                            <el-input v-model="itemPlainText.voteMatterText" type="textarea" placeholder="一起努力，让悦器社越来越好..." :autosize="{ minRows: 3, maxRows: 6}"></el-input>
                            <div class="optionDelete" @click.stop.prevent="operateDeleteMultimedia(dynamicStateFrom.plainTextOption, indexPlainText)">
                              <el-button type="danger" icon="el-icon-delete" circle size="mini" plain></el-button>
                            </div>
                          </div>
                        </transition-group>
                      </draggable>
                    </div>
                    <el-button round @click.stop.prevent="appendVoteOption">添加文本选项</el-button>
                  </div>
                  <!-- 图文 -->
                  <div class="optionContent" v-if="dynamicStateFrom.voteMatterType === '2'">
                    <div class="optionList">
                      <draggable v-model="dynamicStateFrom.imageTextOption" :options="dragOptions">
                        <transition-group tag="div" id="imageText" class="item-imageText">
                          <div class="optionCell" v-for="(itemImageText, indexImageText) in dynamicStateFrom.imageTextOption" :key="'imageText'+indexImageText">
                            <div class="uploadBox">
                              <el-button round>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                              <div class="uploadCell">
                                <input class="uploadInput" type="file" name="image" multiple ref="imageText" accept="image/*" @change="optionUploadMultimediaFile($event, '3', indexImageText)"/>
                              </div>
                            </div>
                            <el-input v-model="itemImageText.voteMatterText" type="textarea" placeholder="一起努力，让悦器社越来越好..." :autosize="{ minRows: 3, maxRows: 6}"></el-input>
                            <div class="exhibitionBox">
                              <draggable v-model="itemImageText.voteMatterImages" element="ul">
                                <li class="exhibitionCell" v-for="(itemImage, indexImage) in itemImageText.voteMatterImages" :key="'image'+indexImage">
                                  <img :src="itemImage">
                                  <div class="exhibitionDelete" @click.stop.prevent="operateDeleteMultimedia(itemImageText.voteMatterImages, indexImage)">
                                    <el-button type="success" icon="el-icon-delete" circle size="mini" plain></el-button>
                                  </div>
                                </li>
                              </draggable>
                            </div>
                            <div class="optionDelete" @click.stop.prevent="operateDeleteMultimedia(dynamicStateFrom.imageTextOption, indexImageText)">
                              <el-button type="danger" icon="el-icon-delete" circle size="mini" plain></el-button>
                            </div>
                          </div>
                        </transition-group>
                      </draggable>
                    </div>
                    <el-button round @click.stop.prevent="appendVoteOption">添加图文选项</el-button>
                  </div>
                  <!-- 视文 -->
                  <div class="optionContent" v-if="dynamicStateFrom.voteMatterType === '3'">
                    <div class="optionList">
                      <draggable v-model="dynamicStateFrom.videoTextOption" :options="dragOptions">
                        <transition-group tag="div" id="videoText" class="item-videoText">
                          <div class="optionCell" v-for="(itemVideoText, indexVideoText) in dynamicStateFrom.videoTextOption" :key="'videoText'+indexVideoText">
                            <div class="uploadBox">
                              <el-button round>上传视频<i class="el-icon-upload el-icon--right"></i></el-button>
                              <div class="uploadCell">
                                <input class="uploadInput" type="file" name="video" ref="videoText" accept="video/*" @change="optionUploadMultimediaFile($event, '4', indexVideoText)"/>
                              </div>
                            </div>
                            <el-input v-model="itemVideoText.voteMatterText" type="textarea" placeholder="一起努力，让悦器社越来越好..." :autosize="{ minRows: 3, maxRows: 6}"></el-input>
                            <div class="exhibitionBox">
                              <draggable v-model="itemVideoText.voteMatterVideos" element="ul">
                                <ul class="exhibitionCell" v-for="(itemVideo, indexVideo) in itemVideoText.voteMatterVideos" :key="'video'+indexVideo">
                                  <video :src="itemVideo.url" controls></video>
                                  <div class="exhibitionDelete">
                                    <el-button type="primary" icon="el-icon-picture" circle size="mini" plain @click.stop.prevent="operateCompileMultimedia(itemVideo)"></el-button>
                                    <el-button type="success" icon="el-icon-delete" circle size="mini" plain @click.stop.prevent="operateDeleteMultimedia(itemVideoText.voteMatterVideos, indexVideo)"></el-button>
                                  </div>
                                </ul>
                              </draggable>
                            </div>
                            <div class="optionDelete" @click.stop.prevent="operateDeleteMultimedia(dynamicStateFrom.videoTextOption, indexVideoText)">
                              <el-button type="danger" icon="el-icon-delete" circle size="mini" plain></el-button>
                            </div>
                          </div>
                        </transition-group>
                      </draggable>
                    </div>
                    <el-button round @click.stop.prevent="appendVoteOption">添加视文选项</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <span slot="footer" class="dialog-footer dialogFooter" v-if="dynamicStateFrom.voteType !== '0'">
              <el-button @click="dialogOuterVisible = false">取 消</el-button>
              <el-button type="primary" @click.stop.prevent="operatePublishTemplate('dynamicStateFrom')">确 定</el-button>
          </span>
        </div>
        <!--  查看  -->
        <div v-if="operateType === '3'">
          <div class="exhibitionContent">
            <el-form ref="dynamicStateFrom" :model="dynamicStateFrom" :rules="dynamicStateRules" label-width="20%">
              <el-form-item>
                <div class="dialogContent">{{dynamicStateFrom.voteTitle}}</div>
              </el-form-item>
              <el-form-item>
                <div class="dialogContent">{{dynamicStateFrom.voteExplain}}</div>
              </el-form-item>
              <el-form-item>
                <span>发布时间： {{dynamicStateFrom.createTime}}</span>
                <span style="margin-left: 180px">截止时间： {{dynamicStateFrom.voteAbort}}</span>
              </el-form-item>
              <el-form-item>
                <!-- 文本 -->
                <div v-if="dynamicStateFrom.voteMatterType === '1'">
                  <div v-for="(item, index) in dynamicStateFrom.plainTextOption" :key="'imageTextShow'+index">
                    <div>{{index + 1}}、 {{item.voteMatterText}}</div>
                    <div>
                      <el-progress :text-inside="true" :stroke-width="18" :percentage="Math.round(item.voteMatterCount/dynamicStateFrom.forumVote*100) || 0"></el-progress>
                      {{item.voteMatterCount}}票
                    </div>
                  </div>
                </div>
                <div v-if="dynamicStateFrom.voteMatterType === '2'">
                  <div v-for="(item, index) in dynamicStateFrom.imageTextOption" :key="'imageTextShow'+index">
                    <div>{{index + 1}}、 {{item.voteMatterText}}</div>
                    <div class="exhibitionMultimediaList">
                      <div class="exhibitionMultimediaCell" v-for="(itemImg, indexImg) in item.voteMatterImages" :key="'img'+indexImg">
                        <img :src="itemImg" alt="">
                      </div>
                    </div>
                    <div>
                      <el-progress :text-inside="true" :stroke-width="18" :percentage="Math.round(item.voteMatterCount/dynamicStateFrom.forumVote*100) || 0"></el-progress>
                      {{item.voteMatterCount}}票
                    </div>
                  </div>
                </div>
                <!-- 视文 -->
                <div v-if="dynamicStateFrom.voteMatterType === '3'">
                  <div v-for="(item, index) in dynamicStateFrom.videoTextOption" :key="'videoTextShow'+index">
                    <div>{{index + 1}}、 {{item.voteMatterText}}</div>
                    <div class="exhibitionMultimediaList" v-if="dynamicStateFrom.voteMatterType === '3'">
                      <div class="exhibitionMultimediaCell" v-for="(itemVideo, indexVideo) in item.voteMatterVideos" :key="'vid'+indexVideo">
                        <video :src="itemVideo.url" :poster="itemVideo.cover" controls></video>
                      </div>
                    </div>
                    <div>
                      <el-progress :text-inside="true" :stroke-width="18" :percentage="Math.round(item.voteMatterCount/dynamicStateFrom.forumVote*100) || 0"></el-progress>
                      {{item.voteMatterCount}}票
                    </div>
                  </div>
                </div>
                <div>已有 {{dynamicStateFrom.forumVote}} 人投票</div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 弹窗 (内层) -->
        <el-dialog width="60%" title="" :visible.sync="dialogInnerVisible" append-to-body>
          <div v-if="JSON.stringify(multimediaItem) !== '{}'">
            <el-form label-width="20%">
              <el-form-item>
                <div style="width: 100px;position: relative;margin-bottom: 10px;">
                  <el-button round>上传封面<i class="el-icon-upload el-icon--right"></i></el-button>
                  <div style="width: 100%;position: absolute;top: 0;left: 0;opacity: 0;">
                    <input style="width: 100%;" type="file" name="image" ref="imageCover" accept="image/*" @change="optionUploadMultimediaFile($event, '5', 0)"/>
                  </div>
                </div>
                <div style="margin-right:10px;margin-bottom:10px;width:600px;height: 250px;border: 1px solid #eaeaea;" v-if="multimediaItem.cover || multimediaCover">
                  <img :src="multimediaItem.cover" width="100%" height="100%" style="display: block;object-fit: contain;" v-if="!multimediaCover">
                  <img :src="multimediaCover" width="100%" height="100%" style="display: block;object-fit: contain;" v-if="multimediaCover">
                </div>
              </el-form-item>
              <el-form-item>
                视频展示
                <div style="margin-right:10px;margin-bottom:10px;width:600px;height: 250px;border: 1px solid #eaeaea;">
                  <video :src="multimediaItem.url" controls width="100%" height="100%"></video>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer dialogFooter" v-if="dynamicStateFrom.voteType !== '0'">
              <el-button>取 消</el-button>
              <el-button type="primary" @click.stop.prevent="operateConfirmMultimedia">确 定</el-button>
          </span>
        </el-dialog>
      </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
  // 拖拽
  import draggable from 'vuedraggable'
  import { upLoadFileToOSS } from '@/config/utils'
  import { acquireVoteFromGather, appendVoteToGather, removeRecordFromGather, stickRecordFromGather, examineVoteFromGather, acquireUserMessage, obtainTeachList } from '@/config/api'
  export default {
    name: 'voteManage',
    components: {
      draggable,
    },
    data () {
      return {
        // 推荐列表
        voteList: [],
        // 用户列表
        userList: [],
        // 列表总页数
        listTotal: 0,
        // 当前页面
        currentPage: 1,
        // 每页条数
        pageSize: 10,
        // 搜索文本
        searchText: '',
        // 操作类型 1 新增 2 编辑 3 查看
        operateType: '0',
        // 动态表单 -- 投票
        dynamicStateFrom: {
          // 用户唯一凭证
          unionId: '',
          // 用户id
          userId: '',
          // 动态类型  1投票 2推荐 3反馈 4交流
          matterType: '1',
          // 动态标签  1不选择如何标签 2Bug反馈 3功能与内容 4学习交流
          matterLabel: '1',
          // 内容置顶 1置顶 0不置顶
          matterStick: '0',
          // 内容采纳 1采纳 0不采纳
          matterAdopt: '0',
          // 投票类型  1普通动态  2投票动态
          voteType: '0',
          // 默认文本
          defaultText: '',
          // 默认视频
          defaultVideos: [],
          // 默认图片
          defaultImages: [],
          // 默认动态类型  1图片 2视频
          defaultMatterType: '0',
          // 投票标题
          voteTitle: '',
          // 投票说明
          voteExplain: '',
          // 投票截止时间
          voteAbort: '',
          // 投票内容id列表
          voteMatterList: [],
          // 投票动态类型  1文本 2图文 3视文
          voteMatterType: '0',
          // 文本 选项
          plainTextOption: [],
          // 图文 选项
          imageTextOption: [],
          // 视文 选项
          videoTextOption: [],
          // 上传多媒体类型 1普通动态image 2普通动态video 3投票动态image 4投票动态video 5投票动态video封面 6普通动态video封面
          uploadType: '0',
          // 发布时间
          createTime: '',
          // 评论数
          forumComment: 0,
          // 点赞数
          forumPraise: 0,
          // 分享数
          forumShare: 0,
          // 投票数
          forumVote: 0
        },
        dynamicStateRules: {
          userId: [
            { required: true, message: '请选择用户', trigger: 'change'}
          ],
          // defaultText: [
          //     { required: true, message: '请输入文本内容', trigger: 'blur' },
          // ],
          voteTitle: [
              { required: true, message: '请输入标题', trigger: 'blur' },
          ],
          voteExplain: [
              { required: true, message: '请输入说明', trigger: 'blur' },
          ],
          voteAbort: [
            { type: 'date', required: true, message: '请选择截止时间', trigger: 'change' }
          ]
        },
        // 弹窗 (外层) 显示
        dialogOuterVisible: false,
        // 弹窗 (内层) 显示
        dialogInnerVisible: false,
        // 弹窗 标题
        dialogTitle: '',
        // 拖拽配置
        dragOptions: {
            animation: 120,
            scroll: true,
            group: 'sortlist',
            ghostClass: 'ghost-style'
        },
        // 图文选项 多媒体对象
        multimediaItem: {},
        // 图文选项 多媒体对象 视频封面
        multimediaCover: ''
      }
    },
    mounted (){
      const self = this;
      // 初始化 投票管理界面
      self.initVoteManageInterface()
    },
    methods: {
      // 初始化 投票管理界面
      async initVoteManageInterface() {
        const self = this;
        // 获取 集合中的投票记录
        self.obtainVoteFromGather()
        // 获取用户信息
        const userInfo = await acquireUserMessage()
        if (userInfo.status === 200) {
          // 用户列表
          self.userList = userInfo.data
          console.log(userInfo, '......userInfo')
        }
      },
      // 获取 集合中的投票记录
      async obtainVoteFromGather() {
        const self = this;
        const voteInfo = await acquireVoteFromGather(self.currentPage, self.pageSize, self.searchText)
        console.log(voteInfo, '获取 集合中的投票记录')
        if (voteInfo.status === 200) {
          // 推荐列表
          self.voteList = voteInfo.data.list
          // 列表总页数
          self.listTotal = voteInfo.data.total
        }
      },
      // 获取 单个的投票记录
      async obtainRecordOfVote(matterId){
        const self = this;
        const recordInfo = await examineVoteFromGather(matterId)
        if (recordInfo.status === 200) {
          const recordData = recordInfo.data
          // 投票类型  1普通动态  2投票动态
          if (recordData.voteType === '2') {
            // 动态类型  1投票 2推荐 3反馈 4交流
            self.dynamicStateFrom = recordData
            console.log(self.dynamicStateFrom, ' 获取 单个的投票记录')
          }
        }
      },
      // 初始化投票模板
      initVoteTemplate() {
        const self = this;
        // 操作类型 1 新增 2 编辑 3 查看
        self.operateType = '0'
        // 用户唯一凭证
        self.dynamicStateFrom.unionId = ''
        // 动态类型  1投票 2推荐 3反馈 4交流
        self.dynamicStateFrom.matterType = '1'
        // 内容置顶 1置顶 0不置顶
        self.dynamicStateFrom.matterStick = '0'
        // 内容采纳 1采纳 0不采纳
        self.dynamicStateFrom.matterAdopt = '0'
        // 投票类型  1普通动态  2投票动态
        self.dynamicStateFrom.voteType = '0'
        // 默认文本
        self.dynamicStateFrom.defaultText = ''
        // 默认视频
        self.dynamicStateFrom.defaultVideos = []
        // 默认图片
        self.dynamicStateFrom.defaultImages = []
        // 默认动态类型  1图片 2视频
        self.dynamicStateFrom.defaultMatterType = '0'
        // 投票标题
        self.dynamicStateFrom.voteTitle = ''
        // 投票说明
        self.dynamicStateFrom.voteExplain = ''
        // 投票截止时间
        self.dynamicStateFrom.voteAbort = ''
        // 投票内容id列表
        self.dynamicStateFrom.voteMatterList = []
        // 投票动态类型  1文本 2图文 3视文
        self.dynamicStateFrom.voteMatterType = '0'
        // 文本 选项
        self.dynamicStateFrom.plainTextOption = []
        // 图文 选项
        self.dynamicStateFrom.imageTextOption = []
        // 视文 选项
        self.dynamicStateFrom.videoTextOption = []
        // 上传多媒体类型 1普通动态image 2普通动态video 3投票动态image 4投票动态video 5投票动态video封面 6普通动态video封面
        self.dynamicStateFrom.uploadType = '0'
        // 发布时间
        self.dynamicStateFrom.createTime = ''
        // 评论数
        self.dynamicStateFrom.forumComment = 0
        // 点赞数
        self.dynamicStateFrom.forumPraise = 0
        // 分享数
        self.dynamicStateFrom.forumShare = 0
        // 投票数
        self.dynamicStateFrom.forumVote = 0
      },
      // 新增投票模板
      appendVoteTemplate() {
        const self = this;
        // 初始化投票模板
        self.initVoteTemplate()
        // 操作类型 1 新增 2 编辑 3 查看
        self.operateType = '1'
        // 弹窗 标题
        self.dialogTitle = '新增·选择投票模板'
        // 弹窗 显示
        self.dialogOuterVisible = true
      },
      // 选择投票模板
      async optionVoteTemplate(status) {
        const self = this;
        // 投票类型  1普通动态  2投票动态
        self.dynamicStateFrom.voteType = status
        if (self.dynamicStateFrom.voteType === '1') {
          // 弹窗 标题
          self.dialogTitle = '新增·普通动态'
        }
        if (self.dynamicStateFrom.voteType === '2') {
          // 弹窗 标题
          self.dialogTitle = '新增·投票动态'
        }
      },
      // 新增投票选项
      appendVoteOption() {
        const self = this;
        let voteOptionItem = {
          voteMatterId: null,
          matterId: null,
          forumId: null,
          voteMatterText: '',
          voteMatterVideos: [],
          voteMatterImages: [],
          voteMatterCount: 0
        }
        // 投票动态类型  1文本 2图文 3视文
        if (self.dynamicStateFrom.voteMatterType === '1') {
          // 文本 选项
          self.dynamicStateFrom.plainTextOption.push(voteOptionItem)
        }
        if (self.dynamicStateFrom.voteMatterType === '2') {
          // 图文 选项
          self.dynamicStateFrom.imageTextOption.push(voteOptionItem)
        }
        if (self.dynamicStateFrom.voteMatterType === '3') {
          // 视文 选项
          self.dynamicStateFrom.videoTextOption.push(voteOptionItem)
        }
      },
      // 选择欲上传的多媒体文件
      async optionUploadMultimediaFile(event, status, index) {
        const self = this;
        // 浏览器兼容 (FF不兼容event.srcElement)
    	  let evt = event.srcElement ? event.srcElement : event.target;
        let file = evt.files; // 获取要上传的文件
        // 上传多媒体类型 1普通动态image 2普通动态video 3投票动态image 4投票动态video 5投票动态video封面 6普通动态video封面
        self.dynamicStateFrom.uploadType = status
        let ossPath = ''
        if (self.dynamicStateFrom.uploadType === '1' || self.dynamicStateFrom.uploadType === '3' || self.dynamicStateFrom.uploadType === '5' || self.dynamicStateFrom.uploadType === '6') {
          ossPath = 'wx_mp/forum/image'
        }
        if (self.dynamicStateFrom.uploadType === '2' || self.dynamicStateFrom.uploadType === '4') {
          ossPath = 'wx_mp/forum/video'
        }
        if (ossPath) {
          const loading = self.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          for (let i = 0; i < file.length; i++) {
            // 上传多媒体
            const mainBannerUrl = await upLoadFileToOSS(file[i], ossPath)
            console.log(mainBannerUrl, '选择欲上传的多媒体文件')
            if (self.dynamicStateFrom.uploadType === '1') {
              // 默认图片
              self.dynamicStateFrom.defaultImages.push(mainBannerUrl)
            }
            if (self.dynamicStateFrom.uploadType === '2') {
              if (JSON.stringify(self.dynamicStateFrom.defaultVideos) === '[]') {
                // 默认视频
                self.dynamicStateFrom.defaultVideos.push({
                  url: mainBannerUrl,
                  cover: ''
                })
              } else {
                self.dynamicStateFrom.defaultVideos[0]["url"] = mainBannerUrl
                self.dynamicStateFrom.defaultVideos[0]["cover"] = ''
              }
            }
            if (self.dynamicStateFrom.uploadType === '3') {
              // 图文选项 --- 图片列表
              self.dynamicStateFrom.imageTextOption[index].voteMatterImages.push(mainBannerUrl)
            }
            if (self.dynamicStateFrom.uploadType === '4') {
              // 视文选项 --- 视频列表
              self.dynamicStateFrom.videoTextOption[index].voteMatterVideos.push({
                url: mainBannerUrl,
                cover: ''
              })
            }
            if (self.dynamicStateFrom.uploadType === '5') {
              // 图文选项 多媒体对象 视频封面
              self.multimediaCover = mainBannerUrl
            }
            if (self.dynamicStateFrom.uploadType === '6') {
              self.dynamicStateFrom.defaultVideos[index]["cover"] = mainBannerUrl
            }
            if (i === file.length-1) {
              console.log('...............')
              // 上传多媒体类型 1普通动态image 2普通动态video 3投票动态image 4投票动态video 5投票动态video封面 6普通动态video封面
              if (self.dynamicStateFrom.uploadType === '1') {
                self.$refs.imageDefault.value = ''
              }
              if (self.dynamicStateFrom.uploadType === '2') {
                self.$refs.videoDefault.value = ''
              }
              if (self.dynamicStateFrom.uploadType === '3') {
                if (self.$refs.imageText && JSON.stringify(self.$refs.imageText) !== '[]') {
                  for (let imageIndex = 0; imageIndex < self.$refs.imageText.length; imageIndex++) {
                    self.$refs.imageText[imageIndex].value = ''
                  }
                }
              }
              if (self.dynamicStateFrom.uploadType === '4') {
                if (self.$refs.videoText && JSON.stringify(self.$refs.videoText) !== '[]') {
                  for (let videoIndex = 0; videoIndex < self.$refs.videoText.length; videoIndex++) {
                    self.$refs.videoText[videoIndex].value = ''
                  }
                }
              }
              if (self.dynamicStateFrom.uploadType === '5') {
                self.$refs.imageCover.value = ''
              }
              if (self.dynamicStateFrom.uploadType === '6') {
                self.$refs.defaultCover.value = ''
              }
              loading.close()
            }
          }
        }
      },
      // 操作·删除多媒体
      operateDeleteMultimedia(object, index) {
        const self = this;
        object.splice(index, 1)
      },
      // 操作·编辑多媒体
      operateCompileMultimedia(item) {
        const self = this;
        // 弹窗 (内层) 显示
        self.dialogInnerVisible = true
        // 图文选项 多媒体对象
        self.multimediaItem = {}
        // 图文选项 多媒体对象 视频封面
        self.multimediaCover = ''
        // 图文选项 多媒体对象
        self.multimediaItem = item
      },
      // 操作·确定编辑多媒体弹窗
      operateConfirmMultimedia() {
        const self = this;
        self.multimediaItem.cover = self.multimediaCover
        // 弹窗 (内层) 显示
        self.dialogInnerVisible = false
        console.log(self.dynamicStateFrom, '操作·确定多媒体')
      },
      // 操作·发布模板
      operatePublishTemplate(formName) {
        const self = this;
        self.$refs[formName].validate((valid) => {
            if (valid) {
              // 投票类型  1普通动态  2投票动态
              if (self.dynamicStateFrom.voteType === '1') {
                // 默认动态类型  1图片 2视频
                if (self.dynamicStateFrom.defaultMatterType === '0' && !self.dynamicStateFrom.defaultText) {
                  self.$message('少年, 你还没填写动态内容');
                  return
                }
                if (self.dynamicStateFrom.defaultMatterType === '1') {
                  if (!self.dynamicStateFrom.defaultImages || JSON.stringify(self.dynamicStateFrom.defaultImages) === '[]') {
                    self.$message('少年, 你还没有上传图片呢');
                    return
                  }
                  // 上传图片最多9张
                  if (self.dynamicStateFrom.defaultImages.length > 9) {
                    self.$message('少年, 上传图片不应超过9张');
                    return
                  }
                }
                if (self.dynamicStateFrom.defaultMatterType === '2') {
                  if (!self.dynamicStateFrom.defaultVideos || JSON.stringify(self.dynamicStateFrom.defaultVideos) === '[]') {
                    self.$message('少年, 你还没有上传视频呢');
                    return
                  }
                }
              }
              if (self.dynamicStateFrom.voteType === '2') {
                // 投票动态类型  1文本 2图文 3视文
                if (self.dynamicStateFrom.voteMatterType === '0') {
                  self.$message('少年, 请选择编辑选项 文本、图文 or 视文');
                  return
                }
                if (self.dynamicStateFrom.voteMatterType === '1') {
                  if (!self.dynamicStateFrom.plainTextOption || JSON.stringify(self.dynamicStateFrom.plainTextOption) === '[]') {
                    self.$message('少年, 添加文本投票的选项');
                    return
                  }
                  let plainTextFlag = false
                  for (let i = 0; i < self.dynamicStateFrom.plainTextOption.length; i++) {
                    if (!self.dynamicStateFrom.plainTextOption[i] || !self.dynamicStateFrom.plainTextOption[i].voteMatterText) {
                      self.$message('少年, 添加的选项内容中有空着');
                      return
                    }
                  }
                }
                if (self.dynamicStateFrom.voteMatterType === '2') {
                  if (!self.dynamicStateFrom.imageTextOption || JSON.stringify(self.dynamicStateFrom.imageTextOption) === '[]') {
                    self.$message('少年, 添加图文投票的选项');
                    return
                  }
                  let imageTextFlag = false
                  for (let j = 0; j < self.dynamicStateFrom.imageTextOption.length; j++) {
                    if (!self.dynamicStateFrom.imageTextOption[j] || JSON.stringify(self.dynamicStateFrom.imageTextOption[j].voteMatterImages) === '[]') {
                      self.$message('少年, 添加的选项内容中有没上传图片的');
                      return
                    }
                  }
                }
                if (self.dynamicStateFrom.voteMatterType === '3') {
                  if (!self.dynamicStateFrom.videoTextOption || JSON.stringify(self.dynamicStateFrom.videoTextOption) === '[]') {
                    self.$message('少年, 添加视文投票的选项');
                    return
                  }
                  let videoTextFlag = false
                  for (let k = 0; k < self.dynamicStateFrom.videoTextOption.length; k++) {
                    if (!self.dynamicStateFrom.videoTextOption[k] || JSON.stringify(self.dynamicStateFrom.videoTextOption[k].voteMatterVideos) === '[]') {
                      self.$message('少年, 添加的选项内容中有没上传视频');
                      return
                    }
                    // if (!self.dynamicStateFrom.videoTextOption[k].voteMatterVideos)
                  }
                }
              }
              console.log(self.dynamicStateFrom, '...self.dynamicStateFrom')
              self.$confirm('少年, 一经发布不可再次修改', '提示', {
                confirmButtonText: '发布',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              }).then(async() => {
                const appendVoteState = await appendVoteToGather(self.dynamicStateFrom)
                if (appendVoteState.status === 200) {
                  // 弹窗 显示
                  self.dialogOuterVisible = false
                  // 获取 集合中的投票记录
                  self.obtainVoteFromGather()
                } else {
                  self.$message({
                    type: 'info',
                    message: '发布失败'
                  });
                }
              }).catch(() => {});
            } else {
              console.log('表单提交失败!!');
              return false;
            }
        })
      },
      // 操作·查看投票记录
      operateExamineRecord(matterId) {
        const self = this;
        // 初始化投票模板
        self.initVoteTemplate()
        // 操作类型 1 新增 2 编辑 3 查看
        self.operateType = '3'
        // 弹窗 标题
        self.dialogTitle = '查看·选择投票模板'
        // 弹窗 显示
        self.dialogOuterVisible = true
        // 获取 单个的投票记录
        self.obtainRecordOfVote(matterId)
      },
      // 操作·删除投票记录
      operateDeleteRecord(forumId) {
        const self = this;
        self.$confirm('删除后不可恢复，且为了保证投票的公平性，请谨慎删除投票贴', '确定删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async() => {
          const removeVoteState = await removeRecordFromGather(forumId)
          console.log(removeVoteState, '...removeVoteState')
          if (removeVoteState.status === 200) {
            // 获取 集合中的投票记录
            self.obtainVoteFromGather()
          } else {
            self.$message({
              type: 'info',
              message: '删除失败'
            });
          }
        }).catch(() => {});
      },
      // 操作·置顶投票记录
      async operateStickRecord(matterId, matterStick) {
        const self = this;
        const stickVoteState = await stickRecordFromGather(matterId, matterStick)
        if (stickVoteState.status === 200) {
          // 当前页面
          self.currentPage = 1
            // 获取 集合中的投票记录
            self.obtainVoteFromGather()
          } else {
            self.$message({
              type: 'info',
              message: '置顶失败'
            });
          }
      },
      // 操作·搜索投票记录
      async operateSearchRecord() {
        const self = this;
        // 获取 集合中的投票记录
        self.obtainVoteFromGather()
      },
      handleSizeChange(val) {
        const self = this;
        // 每页条数
        self.pageSize = val
        // 获取 集合中的投票记录
        self.obtainVoteFromGather()
      },
      handleCurrentChange(val) {
        const self = this;
        // 当前页面
        self.currentPage = val
        // 获取 集合中的投票记录
        self.obtainVoteFromGather()
      }
    },
  }
</script>
<style lang="less">
  .voteManage{
    .el-dialog__footer{
      text-align: right;
      display: block;
    }
  }
</style>
<style lang="less" scoped>
  @import 'voteManage.less';
</style>
